// 多级分类选择
Vue.component('c-cascader', {
  template:`
  <el-cascader
    :options="options"
    v-model="values"
    :separator="separator"
    :expand-trigger="trigger"
    :placeholder="placeholder"
    :change-on-select="selectall"
  ></el-cascader>
  `,
  data() {
    return {}
  },
  props: {
    options: {
      default: [{
        label: "无",
        value:"0"
      }]
    },
    api: {
      default: ""
    },
    value: {
      default: ""
    },
    values: {
      default: []
    },
    placeholder: {
      default: "请选择"
    },
    separator: {
      default: "/"
    },
    trigger: {
      default: "click" // click / hover
    },
    selectall:{
      default: false
    }
  },
  methods: {
    init(){
      if (this.api){
        this.getOptionsByApi(this.api,0);
      }

    },
    // 更新value，调整values的值
    updateValue(){
      val=String(this.value);
      var result=[];

      if (val){

        var search=function(value,data){
          var key=[];
          for (var i in data) {
            if (data.hasOwnProperty(i)) {
              var item=data[i];
              if (String(item.value) == value){//找到
                key.push(String(item.value));
                return key;
              }else{//没找到，找children
                if (item.children){
                  var r=search(value,item.children);
                  if (r.length){// children找到了

                    key.push(String(item.value));
                    for (var i = 0; i < r.length; i++) {
                      key.push(r[i]);
                    }
                    return key;
                  }else{// children没找到

                  }
                }else{//没有children 这条分支结束

                }

              }

            }
          }
          return key;
        }

        var result=search(val,this.options);
      }
      this.values=result;
    },
    getOptionsByApi(api,pid){
      var that=this;
      pid=pid || "0";
      var postData={
        pid: pid
      };
      APP.ajax(api,postData,function(msg){
        if (msg.result){
          that.options=msg.data;
          if (that.value){
            that.updateValue();
          }
        }
      });
    }

  },
  watch: {
    values(newName, oldName) {
      var len=this.values.length;
      if (len){
        this.$emit('input', this.values[len-1]);
      }else{
        this.$emit('input', "");
      }
      this.$emit('update:values', this.values);
    },
    value(newName, oldName){

      if (newName){
        var len=String(this.values.length);
        var val=String(this.values[len-1]);
        if (newName != val){
          this.updateValue();
        }
      }else{
        this.values=[];
      }

    }
  },
  mounted(){
    var that=this;
    this.$nextTick(function () {
      that.init();
    });
  }

});


// 可搜索select
Vue.component('c-search-select', {
  template:`
  <el-select
    v-model="values"
    filterable
    remote
    reserve-keyword
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    @focus="focus"
    :loading="loading">
    <el-option
      v-for="item in list"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  `,
  data() {
    return {
      loading:false,
      list:[],
      values:""
    }
  },
  props: {
    api: {
      default: ""
    },
    value: {
      default: ""
    },
    placeholder: {
      default: "请选择"
    }
  },
  methods: {
    focus(){

    },
    remoteMethod(query) {
      if (this.api){
        var that=this;
        query=query || "";
        this.loading = true;
        APP.ajax(this.api,{query:query},function(msg){
          this.loading = false;
          if (msg.result){
            that.list=msg.data;
          }
        });
      }
    }
  },
  watch: {
    value(newName, oldName){
      this.$emit('input', this.value);
    }
  }

});
